<template>
  <button class="btn" :class="btnClass">
    <slot class="text"></slot>
  </button>
</template>
<script lang="ts" setup>
import { computed, PropType } from 'vue';

const props = defineProps({
  size: {
    type: String as PropType<'large' | 'middle'>,
    default: 'middle',
  },
  type: {
    type: String as PropType<'primary' | 'default' | 'link'>,
    default: 'link',
  },
  block: {
    type: Boolean,
    default: false,
  },
});

const btnClass = computed(() => {
  let result = `btn-${props.size} btn-${props.type}`;
  if (props.block) {
    result += ' btn-block';
  }
  return result;
});
</script>
<style lang="scss" scoped>
.btn{
  background: #FD6564;
  color:#fff;
  font-size: 32rpx;
  height: 84rpx;
  line-height: 84rpx;
  border-radius: 46rpx;
  width: 645rpx;
  
}
.login_out_btn{
  background: black;
  color:black;
  font-size: 32rpx;
  height: 84rpx;
  line-height: 84rpx;
  border-radius: 46rpx;

}


</style>
